<template>
  <div class="sjbg">
    <el-card>
      <div slot="header" class="card-header">
        <div style="display: flex; align-items: center">
          <div>
            <el-button type="primary">
              <a href="#2">审计整改问责</a>
            </el-button>
            <el-button
              type="primary"
              @click="$basefn.exportExcel('#out-table', '审计报告')"
              >审计报告下载</el-button
            >
            <el-button
              type="primary"
              @click="$basefn.exportExcel('#out-table', '审计清单')"
              >审计清单下载</el-button
            >
            <el-button type="primary" @click="dialogVisible = true"
              >报告预览</el-button
            >
            <el-button type="primary">报告查看</el-button>
          </div>
        </div>
        <el-select v-model="val">
          <el-option label="平台间电子券数据不一致模型" value="1"> </el-option>
          <el-option label="电子券异常发放情况模型" value="2"> </el-option>
          <el-option label="折价兑换话费套利模型" value="3"> </el-option>
          <el-option label="虚假用户套用电子券模型" value="4"> </el-option>
          <el-option label="电子商务基地重复发放电子券模型" value="5">
          </el-option>
        </el-select>
      </div>
      <el-card shadow="never" style="margin-bottom: 20px">
        <p>
          本次重点审计了中移动集团的电子券管理违规业务，发现审计问题8个，均需进行整改跟进。详细审计清单及结果如下：
        </p>
      </el-card>
      <Table style="margintop: 20px"></Table>
      <el-card shadow="never">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="never">
              <h4>整改问责标准：</h4>
              <p>1、基于省份的基本用户进行整改问责</p>
              <p>2、开通用户在触犯3次规定后进行整改问责，需 通知用户。</p>
              <p>3、省份对整改用户进行监视，确保当月处理问责问题。</p>
              <p>4、无法联系的用户，进行短信通知，有问题1个月之后进行停机。</p>
              <el-button
                type="primary"
                style="float: right; margin: 10px"
                @click="dialogVisibleA = true"
              >
                <a name="2" id="2"> 整改问责结果查询</a>
              </el-button>
            </el-card>
          </el-col>
          <el-col :span="12">
            <TableB></TableB>
          </el-col>
        </el-row>
      </el-card>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" width="60%" top="10vh">
      <el-scrollbar>
        <img src="@/assets/images/bg6.png" alt="" />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="整改问责结果查询"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <TableC />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleA = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from './components/Table'
import TableB from './components/TableB'
import TableC from './components/TableC'
export default {
  components: {
    Table,
    TableB,
    TableC
  },

  data() {
    return {
      val: '1',
      dialogVisible: false,
      dialogVisibleA: false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  height: 66vh;
  text-align: center;
}
img {
  width: 800px;
  margin: auto;
}
</style>
